<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@include file="../common/taglib.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">	
		<meta charset="utf-8" />
		<title>添加页面-keke</title>
		<%@include file="../common/common.jsp" %>
		<script type="text/javascript" src="${basePath}/resources/js/ke_upload.js"></script>
		<script type="text/javascript" src="${basePath}/resources/js/tm_add.js"></script>
		<style>
			.ke_tabbox{width:1200px;background:#f9f9f9;margin:20px auto 0;padding:6px;position:relative;}
			.container .mbox .tit_over h1{overflow:hidden;line-height:100px;width:640px;margin:80px auto 10px;height:100px;}
			.container .mbox .tit_over h1 input{width:100%;text-align: center;background:transparent;border:0}
			.container .mbox{width:960px;}
			.cntarea{width:100%;background:transparent;height:118px;border:0;overflow-y:auto;}
			.edit{border:2px dotted #ccc;height:120px;padding:6px;}
			.buttoncnt{text-align: center;}
			.mcontent p{margin-top:12px}
			.mcontent p input{width:100%;height:32px;text-indent:0.5em}
			.buttoncnt a{padding:12px 56px;background:#7D7D7D;color:#fff;transition:0.6s ease;}
			.buttoncnt a:last-child{background:green;}
			.buttoncnt a:first-child{background:#ccc;}
			.buttoncnt a:hover{background:#666}
			input[readonly]{background:#e5e5e5}
		</style>
	</head>
	<body style="background:url(${basePath}/resources/images/bg2.jpg)" data-opid="${blog.id}">
	<%@include file="../common/header.jsp" %>
		<div class="ke_tabbox">
			<!-- 内容区 -->
		<div class="container">
			<input type="file" class="hidden" id="file" name="file"  accept="image/jpeg,image/png,image/gif,audio/mp3"  onchange="uploadFile()" />
			<audio  id="audio"  data-dir="blog/mp3" controls="controls" data-img="${blog.musiclink}" data-link="${blog.musiclink}"></audio>
			<div class="mbox">
				<img id="img" data-img="${blog.img}" data-dir="blog/images" src="${basePath}/${blog.img}" class="ke_imgs"  width="960" height="350"/>
				<div class="p_over"></div>
				<div class="tit_over">
					<h1 class="edit">
						<input type="text" id="title" value="${blog.title}"/>
					</h1>
					<p>
						${user.username} @刚刚 
						<span id="time">${blog.musictime}</span>/<span id="ptime">00:00</span>
						<span id="percent">0%</span>
					</p>
					<a href="javascript:void(0);" onclick="openBrowse(this,'#img')" class="ke_op"><i class="iconfont icon-upload fz32"></i></a>
					<a href="javascript:void(0);" onclick="playMusic(this)" class="ke_op"><i class="iconfont icon-play fz32"></i></a>
					<!-- 音轨的盒子 -->
					<div id="wrapbox"></div>
				</div>
			</div>
			<div class="content edit mt28">
				<textarea class="cntarea" id="description">${blog.description}</textarea>
			</div> 
			
			<div class="mcontent  mt28">
				<a href="javascript:void(0);" onclick="openBrowse(this,'#audio')" class="ke_op"><i class="iconfont icon-upload fz32"></i></a>
				<input type="hidden" id="musiclink" value="${blog.musiclink}"/>
				<p>音乐歌者：<input type="text" id="musictor" value="${blog.musictor}"/></p>
				<p>音乐标题：<input type="text" id="musictitle" value="${blog.musictitle}"/></p>
				<p>音乐大小：<input type="text" id="musicsize" readonly="readonly" onfocus="this.onblur()" value="${blog.musicsize}"/></p>
				<p>音乐时长：<input type="text" id="musictime" readonly="readonly" onfocus="this.onblur()" value="${blog.musictime}"/></p>
			</div> 
			<div class="buttoncnt mt28">
				<select id="categoryId">
					<option value="">--请选择--</option>
					<option value="1" ${blog.categoryId==1?"selected='selected'":""}>摇滚</option>
					<option value="2" ${blog.categoryId==2?"selected='selected'":""}>流行</option>
					<option value="3" ${blog.categoryId==3?"selected='selected'":""}>民谣</option>
					<option value="4" ${blog.categoryId==4?"selected='selected'":""}>黑暗</option>
				</select>
				<a href="${basePath}/admin/index.do"><i class='iconfont icon-fanhui fz14'></i>返回列表</a>			
				<a href="javascript:void(0);" onclick="tzAdminBlog.save(this)"><i class='iconfont icon-icadd fz14'></i>保存期刊</a>
			</div> 
			<!--ie678不支持--->
		</div>
		<!-- end 内容区 -->
		</div>
  	</body>
</html>
